<template>
  <div>
    <nav-bar></nav-bar>
    <div class="box">
      <van-cell-group>
        <van-field v-model="name" placeholder="姓名" />
        <van-field v-model="tel" placeholder="手机号码" />
        <van-field
          v-model="address"
          placeholder="省份、城市、区县"
          @click="pop"
          
        />
        <van-field
          v-model="detailadress"
          placeholder="详细地址，如楼道、楼盘号等"
        />
      </van-cell-group>
      <van-popup v-model="show" position="bottom" :style="{ height: '45%' }">
        <van-area @confirm="getResult" :area-list="area" @cancel='cancel' :columns-placeholder="['请选择', '请选择', '请选择']"  />
      </van-popup>
      <div class="checkbox">
        <van-checkbox v-model="checked" shape="square" checked-color="#b4282d"
          >设置为默认地址</van-checkbox
        >
      </div>
      <div class="empty"></div>
      <div class="bottom">
        <div class="newAdd" @click="save">保存</div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "../../../components/Navbar";
import area from "@/assets/area.js";
import { saveAction } from "@/api/my/address/save.js";
import { detailAction } from "@/api/my/address/detail.js";
export default {
  props: {},
  data() {
    return {
      area,
      show: false,
      name: "",
      tel: "",
      address: "",
      addressList: [],
      detailadress: "",
      checked: false,
      addressId: "",
    };
  },
  computed: {},
  created() {
    const id = this.$route.query.ids ? this.$route.query.ids : "";
    // console.log(id)
    detailAction({
      id: id,
    }).then((res) => {
      // console.log(res);
      if (id) {
        (this.name = res.data.name),
          (this.tel = res.data.mobile),
          (this.address = res.data.address),
          (this.detailadress = res.data.address_detail);
        this.addressId = res.data.id;
      }
    });
  },
  mounted() {},
  watch: {},
  methods: {
    pop() {
      this.show = !this.show;
    },
    getResult(el) {
      this.address = "";
      // console.log(el);
      this.addressList = el;
      this.addressList.forEach((item) => {
        //  console.log(item.name);
        this.address += item.name;
      });

      this.show = !this.show;
    },
    save() {
      saveAction({
        address: this.address,
        checked: this.checked,
        detailadress: this.detailadress,
        openId: localStorage.getItem("openId"),
        telNumber: this.tel,
        userName: this.name,
        addressId: this.addressId,
      }).then((res) => {
        console.log(res);
      });
      this.$router.push("/my/address");
    },
    cancel(){
      this.show=!this.show
    }
  },
  components: {
    "nav-bar": Navbar,
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  min-height: 700px;
}
.checkbox {
  margin-top: 20px;
  background-color: #fff;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
  background: #fff;
  .newAdd {
    width: 90%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #b4282d;
    color: #ffffff;
    margin: 0 auto;
    background-color: #b4282d;
  }
}
</style>

